<template>
<div class="post-box">
    <el-form>
        <el-form-item label="头像" style="padding-top:20px">
              <el-upload :action="uploadPath" :on-success="imgOnSuccess">
              <img v-if="person.headUrl" :src="person.headUrl" class="headImg" />
                <el-icon v-else class="headImg border"><Plus /></el-icon>
              </el-upload>
        </el-form-item>
        <el-form-item label="姓名:">
      <el-input v-model="person.username" style="width:300px" placeholder="许言"></el-input>
        </el-form-item>
        <el-form-item label="城市:">
             <el-select v-model="form1.region" placeholder="请选择城市">
      <el-option label="" value="" class="ms-5"></el-option>
    </el-select>
     <el-select v-model="form1.region" placeholder="请选择区县" class="ms-4">
      <el-option label="" value=""></el-option>
    </el-select>
        </el-form-item>
        <el-form-item label="性别:">
      <el-radio v-model="person.gender" label="1">男</el-radio>
      <el-radio v-model="person.gender" label="2">女</el-radio>
  </el-form-item>
  <el-form-item label="个人信息:">
      <el-input style="width:350px;height:150px" placeholder="认真工作，有一定的志愿者经验，喜欢帮助他人"></el-input>
  </el-form-item>
  <el-form-item>
              <el-button class="mx-auto" type="primary">保存</el-button>
              <el-button class="mx-auto" type="primary">返回</el-button>
            </el-form-item>
    </el-form>
</div>
  
</template>

<script>
import {Plus} from '@element-plus/icons-vue'
export default {
    name:'OldInformation',
    components:{
        Plus
    },
     data(){
    return{
        form:null,
        form1:{
            region:null,
        },
          person:{
                username :null,
                gender :null,
                headUrl:null,
            },
      methods:{
        //图片上传成功后处理函数
        imgOnSuccess(response){
            let downloadUrl = response.data
            this.person.headUrl = downloadUrl
        },
},

}
     }
}
</script>

<style scoped>
.headImg{
    width: 5rem;
    height: 5rem;
    border-radius: 10%;
}
.post-box {
  width: 600px;
  height: 500px;
  background-color:#bfbfbf;
  border-radius: 5%;
  left: 50%;
  top: 50%;
  transform: translate(70%, 50%);
}
.el-select{
    margin-left:-5px;
}

</style>